<template>

	<!-- 本组件暂时适配于小程序 -->
	<!-- 背景图片只能在H5中设置  小程序中只能固定 -->

	<view class="HB_nav_bar" :style="HBNavStyle">
		<image class="nav_bar_backimg" v-if="isBackImg" src="./images/2.png"></image>
		<view class="status_bar" :style="{height:statusBarHeight+'px', backgroundColor:statusBarColor}"></view>
		<view class="nav_bar" :style="{height:navBarHeight+'px',backgroundColor:statusBarColor}">
			
			<view class="nav_bar_img" @click="BtnReturn()">
				<image class="image" src="./images/1.png" mode="widthFix"></image>
			</view>
			<text class="text" :style="{color: titleColor}">{{title}}</text>
		<!--<view class="nav_bar_img">
				<image class="image" :src="imgUrl" mode="widthFix"></image>
			</view> -->
		</view> 
	</view>
</template>

<script>
	export default {
		props: {
			//标题文字
			title: {
				type: String,
				default: '标题',
			},
			//状态栏/导航栏颜色
			statusBarColor: {
				type: String,
				default: 'rgba(0,0,0,0)',
			},

			// 标题颜色
			titleColor: {
				type: String,
				default: '#fff',
			},
			//状态栏/导航栏渐变背景色和图片
			backColor: {
				type: Array,
				default: () => [],
			},
			isBackImg: {
				type: Boolean,
				default: true,
			}
		},
		name: "tabT",
		data() {
			return {
				statusBarHeight: 0, //状态栏高度
				navBarHeight: 0, //导航栏高度
				imgUrl: require('./images/1.png'), //返回图标
				backImg: require('./images/2.png') //背景图片
			};
		},
		computed: {
			HBNavStyle() {
				if (this.isBackImg) {} else {
					console.log(this.backColor);
					let left = this.backColor[0]
					let rigth = this.backColor[1]
					if (this.backColor.length == 1) { 
						return {
							backgroundColor: `${left}`,
						};
					} else if (this.backColor.length == 2) {
						return {
							backgroundImage: `linear-gradient(180deg,${left},${rigth})`
						};
					}
				}
			},
		},
		created() {

		},
		mounted() {

			//获取状态栏与导航栏
			// #ifdef H5
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight +20;
			this.navBarHeight = systemInfo.statusBarHeight + 44;
			console.log(this.statusBarHeight, this.navBarHeight, 'H5');
			// #endif

			// #ifdef MP-WEIXIN
			let WXres = uni.getMenuButtonBoundingClientRect()
			this.statusBarHeight = WXres.top;
			this.navBarHeight = WXres.height;
			console.log(this.statusBarHeight, this.navBarHeight);
			// #endif
		},
		methods: {
			//原路返回
			BtnReturn() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.HB_nav_bar {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.nav_bar_backimg {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: -1;
		}

		.status_bar {
			width: 100%;
			background-color: #fff;
		}

		.nav_bar {
			width: 100%;
			// padding: 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.nav_bar_img {
				// flex: 1;
				height: 100%;
				// width: 60rpx;
				display: flex;
				align-items: center;
				padding: 0 20rpx 0 32rpx;
				// background-color: pink;

				.image {
					width: 36rpx;
				}
			}

			.nav_bar_img:last-child {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				overflow: hidden;
			}

			.text {
				flex: 1;
				font-size: 30rpx;
				color: #fff;
				// text-align: center;
			}


		}
	}
</style>